<template>
	<view class="container">
		<view class="tabs">
			<view :class="{'tab': true, 'active': activeTab === 0}" @click="switchTab(0)">景区相册</view>
			<view :class="{'tab': true, 'active': activeTab === 1}" @click="switchTab(1)">游客评论</view>
		</view>
		<view class="main">
			<view class="content">
				<image class="img" src="/static/images/p75.png" mode=""></image>
			</view>
			<view class="content">
				<image class="img" src="/static/images/p76.png" mode=""></image>
			</view>
			<view class="content">
				<image class="img" src="/static/images/p77.png" mode=""></image>
			</view>
			<view class="content">
				<image class="img" src="/static/images/p78.png" mode=""></image>
			</view>
			<view class="content">
				<image class="img" src="/static/images/p79.png" mode=""></image>
			</view>
			<view class="content">
				<image class="img" src="/static/images/p80.png" mode=""></image>
			</view>
			<view class="content">
				<image class="img" src="/static/images/p81.png" mode=""></image>
			</view>
			<view class="content">
				<image class="img" src="/static/images/p82.png" mode=""></image>
			</view>
			<view class="content">
				<image class="img" src="/static/images/p83.png" mode=""></image>
			</view>
			<view class="content">
				<image class="img" src="/static/images/p84.png" mode=""></image>
			</view>
			<view class="content">
				<image class="img" src="/static/images/p85.png" mode=""></image>
			</view>
			<view class="content">
				<image class="img" src="/static/images/p86.png" mode=""></image>
			</view>
			<view class="content">
				<image class="img" src="/static/images/p87.png" mode=""></image>
			</view>
			<view class="content">
				<image class="img" src="/static/images/p88.png" mode=""></image>
			</view>
			<view class="content">
				<image class="img" src="/static/images/p89.png" mode=""></image>
			</view>
			<view class="content">
				<image class="img" src="/static/images/p90.png" mode=""></image>
			</view>
			<view class="content">
				<image class="img" src="/static/images/p91.png" mode=""></image>
			</view>
			<view class="content">
				<image class="img" src="/static/images/p92.png" mode=""></image>
			</view>
			<view class="content">
				<image class="img" src="/static/images/p93.png" mode=""></image>
			</view>


		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue"
	const activeTab = ref(0)

	const switchTab = (value) => {
		console.log(value)
		console.log(activeTab)
		activeTab.value = value
	}
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
	}

	.content {
		padding: 3px;
		width: 31%;
		height: 120px;
	}

	.main {
		flex: 1;
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		overflow: auto;
	}

	.img {
		width: 100%;
		height: 100%;
	}

	.tabs {
		width: 100%;
		display: flex;
		background-color: #fff;
		border-radius: 5px;
		justify-content: space-evenly;
		margin-bottom: 10px;
		font-size: 30rpx;
	}

	.active {
		font-weight: 600;
		border-bottom: 2px solid #4676EE;
	}

	.tab {
		/* flex: 1; */
		text-align: center;
		padding: 10px 0;
		cursor: pointer;
		margin-left: 60rpx;
	}
</style>